<template>
  <div
    :class="{ 'shake-animation': !isOpened }"
    class="red-packet"
    @click="openRedPacket"
  >
    <div
      :class="{ opened: isOpened }"
      class="packet-wrapper"
    >
      <div class="packet-top">
        <div class="packet-icon">
          <div class="coin">
            <svg
              class="coin-icon"
              fill="#dc0000"
              viewBox="0 0 1024 1024"
            >
              <path
                d="M554.666667 512h85.333333v85.333333h-85.333333v85.333334h-85.333334v-85.333334H384v-85.333333h85.333333v-21.333333L379.733333 401.066667 439.466667 341.333333 512 413.866667 584.533333 341.333333l59.733334 59.733334-89.6 89.6v21.333333z m-42.666667 341.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m0-85.333333c140.8 0 256-115.2 256-256s-115.2-256-256-256-256 115.2-256 256 115.2 256 256 256z"
              ></path>
            </svg>
          </div>
        </div>
        <div class="packet-text">
          {{ isOpened ? (amount > 0 ? `恭喜获得${amount}元红包` : "谢谢参与") : "恭喜发财，大吉大利" }}
        </div>
      </div>
      <div class="packet-bottom">
        <div class="open-text">{{ isOpened ? (enableAudit ? "审核后发放" : "红包已开启") : "点击拆红包" }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { drawRedPacket } from "@/api/project/lottery";

const isOpened = ref(false);
const amount = ref(0);
const isLoading = ref(false);
const enableAudit = ref(false);

const props = defineProps<{
  sourceType: string;
  sourceId: string;
  dataId: string;
}>();

const emit = defineEmits(["open", "success", "error"]);

const openRedPacket = async () => {
  if (!isOpened.value && !isLoading.value) {
    isLoading.value = true;
    try {
      const { data } = await drawRedPacket({
        sourceType: props.sourceType,
        sourceId: props.sourceId,
        dataId: props.dataId
      });

      isOpened.value = true;
      if (data) {
        enableAudit.value = data.enableAudit || false;
        if (data.amount) {
          amount.value = data.amount;
          emit("success", data);
        } else {
          amount.value = 0;
          emit("error", "红包领取失败");
        }
      }
    } catch (error) {
      isOpened.value = true;
      amount.value = 0;
      emit("error", error);
    } finally {
      isLoading.value = false;
      emit("open");
    }
  }
};
</script>

<style lang="scss" scoped>
.red-packet {
  width: 200px;
  margin: 20px auto;
  cursor: pointer;

  &.shake-animation {
    animation: float 3s ease-in-out infinite;
  }
}

.packet-wrapper {
  background: linear-gradient(135deg, #ff4e4e, #dc0000);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(220, 0, 0, 0.2);
  transition: all 0.3s ease;

  &.opened {
    animation: openPacket 0.5s ease forwards;
  }
}

.packet-top {
  text-align: center;
  color: #fff1f1;
}

.packet-text {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}

.open-text {
  text-align: center;
  color: #ffeb3b;
  font-size: 14px;
  margin-top: 10px;
}

.packet-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  position: relative;
}

.coin {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffd700;
  margin: 0 auto;
  transition: all 0.3s ease;

  &-icon {
    width: 42px;
    height: 42px;
  }

  .amount {
    color: #dc0000;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
  }
}

.packet-wrapper.opened {
  .amount {
    font-size: 20px;
    padding: 0 12px;
  }
}

@keyframes openPacket {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.05);
  }
}
</style>
